<template>
    <div>
            <!-- 头部内容 -->
  <header>
  	  <mt-cell title="前端学习">
  <span><span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>{{username}}</span>
  <img slot="icon" src="../static/img/logo.jpg" width="90" height="24">
</mt-cell>
  </header>        <!--  <mt-header title="前端技术学习" :title='username'></mt-header>  -->

            <transition name="router" mode="out-in">
                <router-view @haslog="logSucces"></router-view>
           <!-- <Home></Home>-->
            </transition>
            <!-- 底部内容 -->
            <nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
			 <router-link class="mui-tab-item" :to="{name:'home'}">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
			 <router-link class="mui-tab-item" :to="{name:'message'}">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">留言</span>
			</router-link>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
			 <router-link class="mui-tab-item" :to="{name:'course'}">
				<span class="mui-icon mui-icon-videocam"></span>
				<span class="mui-tab-label">课程</span>
			</router-link>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
			<router-link class="mui-tab-item" :to="{name:'mine'}">
				<span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>

			</a>
		</nav>
    </div>
</template>
<script>
	import Home from './components/index'
//import connect from './components/common/connect.js';
//引入prodTools
//import prodTools from './components/common/prodTools.js';
    //先创建父组件，后创建子组件
    export default {
    	name:'App',
    	components: {
          Home,
		},
        data(){
            return {
//              pickNum:prodTools.getTotalCount()
              
                username:'请登录'
            }
        },
        methods:{
        	logSucces(data){
        	this.username = data.username
        	},
//      	href(){
//      		if(this.username=='请登录'){
//      			this.$router.push('/login')
//      		}else{
//      			this.$router.push('/mine')
//      		}
//      	}
        },
        created(){//VueComponent  Vue$3  代表new Vue()的对象
            //this.pickNum; //这里的this是VueComponent
            // 记录this:let self = this;

//          connect.$on('addShopcart',num => {
//
//              // this就是connect 而不是VueComponent
//              this.pickNum = this.pickNum + num;
//              //this.pick += num;
                //
                //
                //
                //
                //
                //记录this:self.pick += num;
            },
            computed:{
    loginState:function(){
        return this.$store.state.isLogin 
    }
}
        }

</script>
<style scoped>
.router-enter-active,.router-leave-active{
    transition: opacity .5s 
}
.router-enter,.router-leave-to{
    opacity: 0;
}
</style>